<template>
    <div class="page">
        <!-- search -->
        <div class=""
            style="display: flex;flex-direction: row;align-items: center;padding: 12px;background-color: #FFFFFF;">
            <div class="" @click="popBack()">
                <i class="iconfont icon-arrow-left" style="font-size: 16px;font-weight: bold;"></i>
                <span style="font-size: 16px;">学期管理</span>
            </div>
            <!-- search -->
            <div
                style="margin-left: 12px;flex: 1;display: flex;align-items: center;flex-direction: row;background-color: #F1F1F1;height: 30px;border-radius: 15px;">
                <div class="iconfont icon-sousuo"
                    style="font-size: 16px;font-weight: bold;color: #999999;margin-right: 10px;margin-left: 10px;">
                </div>
                <input type="text" value="" placeholder="请输入关键字搜索"
                    style="font-size: 12px;flex: 1;border: none;background-color: #f1f1f1;" />
                <div style="width: 1px;height: 14px;background-color: #999999;" />
                <div style="font-size: 12px;color: #007AFF;padding:0 5px;width: 40px;text-align: center;">搜索</div>
            </div>
        </div>

        <!-- list -->
        <div style="flex:1;background-color: #f5f5f5;height:100vh;display: flex;justify-content: center;align-items: center;" v-if="list.length == 0">
            <div style="font-size: 14px;color: #999999;">暂无数据</div>
        </div>
        <div class="" style="flex: 1;background-color: #FFFFFF;overflow-y: auto;" v-else>
            <!-- cell -->
            <div @click="loadDetial(item.id)" v-for="(item,idx) in list"
                style="padding: 12px;background-color: #FFFFFF;" :key="idx">
                <!-- row1 -->
                <div style="display: flex;align-items: center;flex-direction: row;">
                    <div class="" style="display: flex;align-items: center;flex: 1;">
                        <div style="font-size: 16px;">{{item.semesterName}}</div>
                    </div>
                    <div style="
						display: flex;align-items: center; background-color: #ffffff;
						padding: 3px 10px;border-style: solid;border-width: 1px;border-color: #ff0000;max-width: 90px;">
                        <div style="text-align: center;font-size: 12px;color: #FF0000;display: block;">代报名</div>
                    </div>
                </div>
                <!-- row2 -->
                <div style="flex: 1;flex-direction: column;display: flex;overflow: hidden;">
                    <div style="font-size: 12px;color: #999999;margin-top: 5px;">线下 | 四川大学</div>
                </div>
                <!-- row3 -->
                <div style="flex: 1;flex-direction: row;display: flex;overflow: hidden;">
                    <div style="font-size: 12px;color: #999999;margin-top: 5px;">报名时间:</div>
                    <div style="display: flex;align-items: center;margin-left: 12px;">
                        <div style="font-size: 12px;color: #999999;margin-top: 5px;margin-right: 5px;">2021年9月16日</div>
                        <div style="font-size: 12px;color: #999999;margin-top: 5px;margin-right: 5px;">至</div>
                        <div style="font-size: 12px;color: #999999;margin-top: 5px;margin-right: 5px;">2021年9月16日</div>
                    </div>
                </div>
                <!-- row4 -->
                <div style="flex: 1;flex-direction: row;display: flex;overflow: hidden;justify-content: space-between;">
                    <div style="display: flex;flex-direction: row;align-items: center;margin-top: 5px;">
                        <div style="font-size: 12px;color: #333333;">原价:</div>
                        <div style="font-size: 12px;color: #ff0000;font-weight: bold;margin-left: 12px;">￥36.00</div>
                    </div>
                    <div
                        style="
						display: flex;align-items: center;
						padding: 3px 10px;border-style: solid;border-width: 1px;border-color: #007AFF;border-radius: 16px;max-width: 90px;">
                        <div style="text-align: center;font-size: 12px;color: #007AFF;display: block;">推送</div>
                        <div class="iconfont icon-fasong"
                            style="font-size: 10px;color: #007AFF;margin-left: 5px;display: block;"></div>
                    </div>
                </div>
                <!-- line -->
                <div style="height: 1px;background-color: #ebebeb;margin-top: 10px;" />
            </div>
        </div>
    </div>
</template>

<script>
    import {
        semesterList
    } from "../../api/workbench.js"
    export default {
        data() {
            return {
                pageNum: 1,
                pageSize: 100,
                list: []
            }
        },
        created() {
            this.netSemesterList()
        },
        methods: {
            popBack() {
                this.$router.back({

                })
            },
            loadDetial(idx) {
                this.$router.push({
                    path: "/pages/semester/semester_detail"
                })
            },
            netSemesterList() {
                let fi = {
                    pageNum: this.pageNum,
                    pageSize: this.pageSize
                };
                let self = this;
                semesterList(fi).then(res => {
                    let {
                        data
                    } = res;
                    let {
                        record
                    } = data;
                    console.warn(JSON.stringify(data))
                    self.list = record;
                }).catch(e => {
                    console.error(e)
                })
            }

        }
    }
</script>

<style scoped>
    .page {
        flex: 1;
        display: flex;
        flex-direction: column;
        background-color: #f4f5f7;
    }
</style>